<style lang="less">
    @import '../../styles/common.less';
    @import 'upload.less';
</style>

<template>
<div>
        <i-Form :model="model" :label-width="100">
      
                <Card>  
        <p slot="title">
            <Icon type="navicon-round"></Icon>
            分类<span>{{pagename}}</span>
        </p>

        <p style="margin:10px 0;">
            <row>
                <i-col span="12">
                <span style="display:inline-block;width:100px;text-align:right;font-size:13px;">内容模式：</span>
                <Radio-group v-model="mode" @on-change="setmode" type="button">
                    <Radio label="PC"></Radio>
                    <Radio label="手机"></Radio>
                </Radio-group>
                </i-col>
                <i-col span="12">
                    <i-button type="primary" style="float:right" @click="save">提交</i-button>
                </i-col>
            </row>
        </p>
        
            <row>
                <i-col span="12">
            <Form-item label="列表模版">
                
                <Select v-model="model.skin" style="width:200px" placeholder="请按需选择列表模版">
                    <Option v-for="item in viewlist" :value="item.skin" :key="item.skin">{{ item.title }}</Option>
                </Select>
            </Form-item> 
            <Form-item label="页面模版">                
                <Select v-model="model.pageskin" style="width:200px" placeholder="默认不用选择">
                    <Option v-for="item in viewlist" :value="item.skin" :key="item.skin">{{ item.title }}</Option>
                </Select>
            </Form-item> 
                </i-col>
                <i-col span="12">
            <Form-item label="发布时间">
                 <Date-picker type="datetime" v-model="model.addtime" format="yyyy-MM-dd HH:mm:ss" placeholder="发布时间" style="width: 200px"></Date-picker>
            
            </Form-item> 
            <Form-item label="最后更新时间">
                 <Date-picker type="datetime" v-model="model.updatetime" format="yyyy-MM-dd HH:mm:ss" placeholder="最后更新时间" style="width: 200px"></Date-picker>
            </Form-item> 
                </i-col>
            </row>
        <row>
            <i-col span="18">
               <row>
                <i-col span="8">                
                    <Form-item label="所属类别">                
                        <i-Select v-model="model.fid" @on-change="changecategoryhandle">
                            <Option v-for="item in categorylist" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                        </i-Select>
                    </Form-item>
                </i-col>
                <i-col span="8">     
                    <Form-item label="排序">               
                            <i-Input type="text" v-model="model.ordnum" placeholder="排序">
                            </i-Input>
                    </Form-item>
                </i-col>
                <i-col span="8" v-show="!ismobile">     
                    <Form-item label="PC显示条数">               
                            <i-Input type="text" v-model="model.pnum" placeholder="PC显示条数">
                            </i-Input>
                    </Form-item>
                </i-col>
                <i-col span="8" v-show="ismobile">     
                    <Form-item label="手机显示条数">               
                            <i-Input type="text" v-model="model.mpnum" placeholder="手机显示条数">
                            </i-Input>
                    </Form-item>
                </i-col>
            </row> 
            <Form-item label="类别名称">
                <i-Input type="text" v-model="model.title" placeholder="类别名称">
                </i-Input>
            </Form-item>
             <FormItem label="页面标题" v-show="!ismobile">
                <i-Input v-model="model.page_title"/>
            </FormItem>
            <FormItem label="手机页面标题" v-show="ismobile">
                <i-Input v-model="model.mpage_title"/>
            </FormItem>
            <FormItem label="页面关键词" v-show="!ismobile">
                <i-Input v-model="model.page_key" type="textarea" placeholder=""></i-Input>
            </FormItem>
            <FormItem label="手机页面关键词" v-show="ismobile">
                <i-Input v-model="model.mpage_key" type="textarea" placeholder=""></i-Input>
            </FormItem>
            <FormItem label="页面描述" v-show="!ismobile">
                <i-Input v-model="model.page_desc" type="textarea" placeholder=""></i-Input>
            </FormItem>
            <FormItem label="手机页面描述" v-show="ismobile">
                <i-Input v-model="model.mpage_desc" type="textarea" placeholder=""></i-Input>
            </FormItem> 
            </i-col>
            <i-col span="6" style="padding-left:10px;">

                <div class="margin-top-10">
                <Card>
                    <p slot="title">
                        <Icon type="paper-airplane"></Icon>
                        图片
                    </p>
                    <p>
                        <Modal title="查看图片" v-model="visible">
                            <img :src="imgName" v-if="visible" style="width: 100%">
                        </Modal>
                        <img :src="imgName" @click="handleView" class="article_img" style="width:98%;height:140px;margin:0 auto" />
                    </p>
                    <p>
                        <i-input v-model="model.pic" @on-blur="setimgName"></i-input>
                        <Upload 
                        ref="upload"
                        :show-upload-list="false"
                        :on-success="handleSuccess"
                        :format="['jpg','jpeg','png','gif']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :action="action">
                        <i-button long style="margin-top:10px;">上传图片</i-button>
                        </Upload>
                    </p>
                </Card>
                </div>
            </i-col>
       
            </row>      
                    <FormItem label="详细内容" v-show="!ismobile">
                        <UEditor id="content" :config="config" ref="content"></UEditor>
                    </FormItem>                
                    <FormItem label="手机详细内容" v-show="ismobile">
                        <UEditor id="mcontent" :config="config" ref="mcontent"></UEditor>
                    </FormItem>
            
            <row style="display:none">
                <i-col span="22">
            <Form-item label="类别banner">
                <i-Input type="text" v-model="model.bannerpic" placeholder="类别banner(空继承父级分类或系统设置)">
                </i-Input>
            </Form-item> 
                </i-col>
                <i-col span="2" style="text-align:center">                    
                    <Upload 
                        ref="bannerupload"
                        :show-upload-list="false"
                        :on-success="handlebannerSuccess"
                        :format="['jpg','jpeg','png','gif']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :action="action">
                    <i-button>上传</i-button>
                    </Upload>
                </i-col>
            </row>
            <Form-item>
                <i-button type="primary" @click="save">提交</i-button>
            </Form-item>
    </Card>
        </i-Form>
    </div>
    
</template>

<script>
import UEditor from '@/ueditor/ueditor.vue'
import api from '../../libs/api';
export default {
    name: 'content_categoryadd',
      components: {UEditor},
    data () {
        return {
            action:wlfData.serverurl+"/upload/index",
            config: {
            //可以在此处定义工具栏的内容
            // toolbars: [
            //  ['fullscreen', 'undo', 'redo','|','bold', 'italic', 'underline',
            //  '|','superscript','subscript','|', 'insertorderedlist', 'insertunorderedlist',
            //  '|','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify']
            // ],
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialContent:'',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
            autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
            initialFrameWidth: null,
            initialFrameHeight: 450,
            BaseUrl: '',
            themePath:'/static/ueditor/themes/',
            UEDITOR_HOME_URL: '/static/ueditor/',
            wordCount:false
          },
            mode:"PC",
            ismobile:false,
            pagename:"添加",
            model:{pic:'',fid:0,ordnum:99,pnum:15,mpnum:14,content:'<p></p>',mcontent:'<p></p>',bannerpic:''},
            categorylist:[],
            imgName: '',
            visible: false,
        };
    },
    methods: {
        setimgName(){
            this.imgName=this.model.pic;
        },
        handleView () {
            this.visible = true;
        },
        handleSuccess (res, file) {
            this.imgName=res.msg.url;
            this.model.pic=res.msg.url;
            // 因为上传过程为实例，这里模拟添加 url
            // file.url = 'https://o5wwk8baw.qnssl.com/7eb99afb9d5f317c912f08b5212fd69a/avatar';
            // file.name = '7eb99afb9d5f317c912f08b5212fd69a';
        },
        handlebannerSuccess(res,file){
            var vm=this;
                vm.model.bannerpic=res.msg.url;
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },
        handleBeforeUpload () {
            const check = this.uploadList.length < 5;
            if (!check) {
                this.$Notice.warning({
                    title: '最多只能上传 5 张图片。'
                });
            }
            return check;
        },
        changecategoryhandle(option){
            if(option==this.model.ID){
                this.$Message.error("不能选择自己作为父级分类");
                return false;
            }
        },
        save(){            
            var vm=this;     
            if(vm.model.fid==vm.model.ID)       {
                this.$Message.error("不能选择自己作为父级分类");
                return;
            }
            this.model.content=this.$refs.content.getUEContent();
            this.model.mcontent=this.$refs.mcontent.getUEContent();
            api.post("/category/save",this.model).then(function(res){
                if(vm.model.ID>0)
                    vm.$Message.success("修改成功！");
                else                    
                    vm.$Message.success("添加成功！");
                    vm.$router.push({
                        name: 'content_category',
                        query: {}
                    });
            })
        },
        setmode(){
            if(this.mode=="PC"){
                this.ismobile=false;
            }
            else{
                this.ismobile=true;
            }
        },
        getskinlist(callback){
            var vm=this;
            api.get("/skin/view.js").then(function(res){
                vm.viewlist=res.data;
            callback();
            })
        },
        bindcatlist(){
             var vm=this;
            vm.categorylist=[];
            api.get("/category/gettree").then(function(res){
                var clist=res.data.msg;
                var tmplist=[{ID:0,title:"根导航"}];
                for(var item in clist){
                    tmplist.push(clist[item]);
                    if(clist[item].children.length>0){
                        var cchild=clist[item].children;
                        for(var citem in cchild){
                            cchild[citem].title="　|-"+cchild[citem].title;
                            tmplist.push(cchild[citem]);
                            if(cchild[citem].children.length>0){
                                var c2child=cchild[citem].children;                                
                                for(var c2item in c2child){
                                    c2child[c2item].title="　　|-"+c2child[c2item].title;
                                    tmplist.push(c2child[c2item]);
                                }
                            }
                        }
                    }
                }
                vm.categorylist=tmplist;
            });
        },
        init () {
            this.getskinlist(function(){});
            var vm=this;
            this.bindcatlist();
            var id=this.$route.query.ID;
            if(id>0){
                this.pagename="编辑"; 
                api.get("/category/getone/"+id).then(function(res){
                    vm.model=res.data.msg;                    
                    delete  vm.model.sid;
                    delete  vm.model.mid;                    
                if(vm.model.content==undefined){
                    vm.model.content="";
                }
                if(vm.model.mcontent==undefined){
                    vm.model.mcontent="";
                }
                if(vm.model.bannerpic==undefined){
                    vm.model.bannerpic="";
                }                 
                vm.$refs.content.ready(function() {                                
                    vm.$refs.content.setUEContent(vm.model.content);
                })
                vm.$refs.mcontent.ready(function() {
                    vm.$refs.mcontent.setUEContent(vm.model.mcontent);
                })
                })
            }
            else{
                this.pagename="添加";             
                this.$nextTick(() => {

                })
            }
        }
    },
    mounted () {
        this.init();
    },
    watch: {
        '$route' () {
            this.init();
        }
    }

};
</script>
